본문으로 건너뛰기

Next.js의 라우팅 시스템

작성일 : 2025.01.19

Next.js의 라우팅 시스템은 파일 기반 라우팅을 채택하고 있으며, 직관적이고 효율적인 라우팅 구조를 제공합니다. 특히 최신 버전에서는 app 디렉토리를 사용하는 App Router를 통해 React의 최신 기능들을 최대한 활용할 수 있습니다.

기본 라우팅 구조​

Next.js의 라우팅은 디렉토리 구조를 따라 자동으로 라우트가 생성됩니다. app 디렉토리 내부에 생성된 폴더는 URL 경로와 직접적으로 매핑되며, page.tsx 파일이 해당 라우트의 UI를 담당합니다. 예를 들어, app/about/page.tsx는 /about 경로로 접근할 수 있습니다.

Dynamic Routes (동적 라우팅)​

Next.js의 Dynamic Routes는 동적인 데이터나 매개변수를 기반으로 페이지를 생성할 수 있게 해주는 기능입니다. 대괄호([])를 사용하여 구현하며, URL의 다양한 패턴을 유연하게 처리할 수 있습니다.

Dynamic Routes의 주요 패턴으로는 다음과 같은 것들이 있습니다:

  • 단일 세그먼트: [id]를 사용하여 하나의 동적 매개변수 처리
  • 다중 세그먼트: [category]/[id]와 같이 여러 동적 매개변수 처리
  • Catch-all 라우팅: [...slug]를 사용하여 여러 경로를 한 번에 처리

Parallel Routes (병렬 라우팅)​

Parallel Routes는 같은 레이아웃 내에서 여러 페이지를 동시에 렌더링할 수 있게 해주는 기능입니다. '@' 기호를 사용하여 구현하며, 복잡한 UI 패턴을 효과적으로 처리할 수 있습니다.

예를 들어, 메인 콘텐츠를 보면서 동시에 모달이나 사이드바와 같은 독립적인 컨텐츠를 표시해야 할 때 유용합니다. 각 병렬 라우트는 자신만의 loading.tsx와 error.tsx를 가질 수 있어 독립적인 로딩 상태와 에러 처리가 가능합니다.

두 기능의 조합​

Dynamic Routes와 Parallel Routes는 함께 사용할 수 있어 더욱 강력한 라우팅 패턴을 구현할 수 있습니다. 예를 들어, 특정 게시물을 보면서 동시에 관련 댓글을 모달로 표시하거나, 사용자 프로필을 보면서 동시에 활동 내역을 사이드바에 표시하는 등의 복잡한 UI 패턴을 구현할 수 있습니다.

주의사항과 모범 사례​

Dynamic Routes를 사용할 때는 generateStaticParams 함수를 통해 빌드 시점에 생성할 경로들을 지정하는 것이 좋습니다. 이는 정적 생성을 통해 성능을 최적화할 수 있게 해줍니다.

Parallel Routes를 사용할 때는 각 라우트의 독립성을 고려해야 합니다. 각 병렬 라우트는 자체적인 상태와 네비게이션을 가질 수 있으므로, 이를 고려한 설계가 필요합니다.